<template>
	<view class="page">
		<view class="upper">
			<commonNavBar title="生成文书"  > 
				<template v-slot:right >
					<image src="/static/img/save.png"  @tap="saveImage" style="width: 45rpx;height: 45rpx;"></image>
				</template>
			 </commonNavBar> 
		</view>
		<view class="content" id="scrrent-page" v-html="documentContent"> </view>
		<screenshot ref="screenshot" :screenId="'scrrent-page'" @renderFinish="getScreenImg"></screenshot>
	</view>
</template>

<script>
	import longscreen from '@/components/screenShot.vue'
	import commonNavBar from '@/components/CommonNavBar.vue';
	 
	export default {
		components:{
			commonNavBar,
			'screenshot': longscreen
		},
		data() {
			return {
				investigationId: null,
				type: null,
				templateId: null,
				documentTemplateList: [],
				documentContent: ""
			}
		},
		onLoad: function(option) {
			const that = this; 
			const eventChannel = this.getOpenerEventChannel();
			// 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
			eventChannel.on('documentTemplateList', function(data) {
				 that.investigationId = data.investigationId
				 that.type = data.type
				 that.templateId = data.templateId
				that.documentTemplateList = data.documentTemplateList;
				//处理内容
				that.initData();
			})
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},
			async initData() {
				const that = this;
				//加载模板内容
				//生成填写的参数
				let param = {
					'templateId': this.templateId
				};
				for (var i = 0; i < this.documentTemplateList.length; i++) {
					param[this.documentTemplateList[i].code] = this.documentTemplateList[i].value
				} 
				let res = await uni.$api.generatorDocument(param);
				if (res.data.code == '1') {
					uni.showToast({
						icon: 'error',
						title: '生成文书失败',
						success: function() {
							uni.navigateBack()
						}
					})
					return;
				}
				this.documentContent = res.data.data
			},
			saveImage() {
				this.$refs.screenshot.startScreen();
			},
			getScreenImg(ret) {
				const that = this;
				//根据传输过来的id 和选中的图片传到后台直接保存 
				uni.showLoading({
					title: '正在生成' ,
					mask: true
				})
				const uploadTask = uni.uploadFile({
					url: '/investigation/uploadInvestigationFile', //仅为示例，非真实的接口地址
					filePath: ret.posterPath,
					name: "file",
					timeout: '10000', //超时时间10秒
					formData: {
						"investigationId": that.investigationId,
						"type": that.type
					},
					dataType: 'json',
					success: (upRes) => {
						uni.showToast({
							title: '生成完成',
							icon: 'success'
						});
						const result = JSON.parse(upRes.data);
						if( result.code  == '1'){
							uni.showModal({
								content: '保存失败,请重新尝试',
								showCancel: false
							})
						}
						const eventChannel = that.getOpenerEventChannel();
						eventChannel.emit('updateImage', result.data.fileUrl);
						uni.navigateBack({
							delta:3
						});
					},
					fail(err) {
						uni.showModal({
							content: '保存失败,请重新尝试',
							showCancel: false
						})
					},
					complete() {
						uni.hideLoading()
					}
				});
			},
		}
	}
</script>

<style  lang="scss">
	.page {
		background: #F9F9F9;
		height: calc(100vh - 195rpx);
	}

	.upper {
		position: fixed;
		z-index: 1;
		top: 0;
		left: 0;
		width: 100%;

		.title {
			background: url('../../../static/img/inspectBg.png');
			background-size: cover;
			width: 100%;
			height: 115rpx;
			line-height: 115rpx;
			position: relative;
			display: flex;
			justify-content: center;
			color: #ffffff;

			.arrow {
				position: absolute;
				left: 33rpx;
				top: 50%;
				transform: translate(0%, -50%);
				width: 100rpx;
				height: 100rpx;

				&::before {
					display: block;
					content: "";
					position: absolute;
					top: 50%;
					left: 0%;
					width: 20rpx;
					height: 20rpx;
					border-left: 1px solid #fff;
					border-top: 1px solid #fff;
					transform: translate(0%, -50%) rotate(-45deg);
				}
			}

			text {
				font-size: 30rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				letter-spacing: 1px;
			}

		}
	}
	.content{
		margin-top: 115rpx;
		padding: 14px;
	}
	
	.intelligence {
		position: absolute;
		right: 30rpx;
		top: 35rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	
	}
</style>